<template>
  <div>
    <Breadcrumb />
    <div class="listHeader">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="medium">
            <el-form-item label="预定编号">
              <el-input v-model="formInline.name" size="small" placeholder="产品名称"></el-input>
            </el-form-item>
            <el-form-item label="预定时间">
              <el-date-picker  v-model="formInline.time" size="small" type="datetime" placeholder="选择日期时间"></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary"  size="small">查询</el-button>
            </el-form-item>
          </el-form>
          <el-button type="warning" size="small"  >导出</el-button>
          <div class="content">
            <el-table  :data="tableData" border style="width:100%;" header-cell-class-name="active-header"
            cell-class-name="table-center">
                <el-table-column  type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="orderNum" label="汇总单编号" width="180" align="center"></el-table-column>
                <el-table-column prop="operator" label="汇总人" width="180" align="center"></el-table-column>
                <el-table-column prop="phone" label="联系电话" align="center"></el-table-column>
                <el-table-column prop="time" label="汇总时间" align="center">
                  <template slot-scope="scope">
                    {{  dayjs(scope.row.yudingTime).format('YYYY-MM-DD HH:mm:ss') }}
                  </template>
                </el-table-column>
                <el-table-column prop="totalPrice" label="汇总单总价格" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                     <el-button size="mini" type="danger"  @click="handleCancel(scope.$index,scope.row)">撤销汇总</el-button>
                  </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <Pagination :pageSize="pageSize" :total="total" @getPagination="getPagination" />
          </div>
     </div>
  </div>
    </template>
    <script>
    import dayjs from 'dayjs'
    import Pagination from '@/components/Pagination.vue'
    export default {
      name: "Collect",
      components:{
        Pagination
      },
      data(){
        return {
            formInline:{
                name:'',
                time:'',
            },
            tableData: [],
            total:10,
            pageSize:8,
        }
      },
      methods:{
        dayjs,
        getPagination(){

        },
        // 撤销汇总
        handleCancel(index,row){
           this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(async () => {
                // 获取当前行 id 
                //let res = await this.$api.cancel({id:row.id})
                const res = { data:{ status:200,msg:'撤销成功'}}
                if(res.data.status===200){
                  this.$message({
                     type: 'success',
                     message:'撤销成功!'
                  });
                    this.collect();
                }
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });          
            });
        },
        // 获取汇总清单
        async collect(){
            let res = await this.$api.collect()
            console.log('res8888',res);
            if(res.data.status ===200){
                this.tableData = res.data.data.list;
                this.total = res.data.total;
                this.pageSize = res.data.pageSize;
            }else{
                this.tableData = [];
                this.total = 10;
                this.pageSize = 8;
            }
        }
      },
      created(){
          this.collect();
      }
    }
    </script>
    
    <style lang="less" scoped>
        .listHeader{
          border:1px solid #eee;
          padding:10px;
          border-radius:6px;
          background: #fff;
        }
        
        .content{
            margin-top:20px;
        }
        
</style>